<template>
    <div class="coupon-list">
        <div class="coupon-select">
            <p>不选择优惠券</p>
            <span></span>
        </div>
        <!-- 优惠券 -->
        <ul>
            <li>
                <div class="coupon-left">
                    <span>折扣券</span>
                    <div><span>9.0</span>折</div>
                    <p>满50元可用</p>
                </div>
                <div class="coupon-middle"></div>
                <div class="coupon-right">
                    <p class="coupon-title">1元3小时用车体验券</p>
                    <p class="coupon-expiry">有效期至2017年07月29日</p>
                    <i></i>
                    <div>
                        <p>全国通用</p>
                        <p>只可抵扣时间费用、里程费用</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="coupon-left">
                    <span>折扣券</span>
                    <div><span>9.0</span>折</div>
                    <p>满50元可用</p>
                </div>
                <div class="coupon-middle"></div>
                <div class="coupon-right">
                    <p class="coupon-title">1元3小时用车体验券</p>
                    <p class="coupon-expiry">有效期至2017年07月29日</p>
                    <i></i>
                    <div>
                        <p>全国通用</p>
                        <p>只可抵扣时间费用、里程费用</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="coupon-left">
                    <span>折扣券</span>
                    <div><span>9.0</span>折</div>
                    <p>满50元可用</p>
                </div>

                <div class="coupon-middle"></div>
                <div class="coupon-right">
                    <p class="coupon-title">1元3小时用车体验券</p>
                    <p class="coupon-expiry">有效期至2017年07月29日</p>
                    <i></i>
                    <div>
                        <p>全国通用</p>
                        <p>只可抵扣时间费用、里程费用</p>
                    </div>
                </div>

            </li>
        </ul>

        <div class="coupon-item"></div>

        <div class="coupon-line">以下优惠券暂不可用</div>
        <ul id="coupon-over">
            <li>
                <div class="coupon-left">
                    <span>折扣券</span>
                    <div><span>9.0</span>折</div>
                    <p>满50元可用</p>
                </div>
                <div class="coupon-middle"></div>
                <div class="coupon-right">
                    <p class="coupon-title">1元3小时用车体验券</p>
                    <p class="coupon-expiry">有效期至2017年07月29日</p>
                    <i></i>
                    <div>
                        <p>全国通用</p>
                        <p>只可抵扣时间费用、里程费用</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="coupon-left">
                    <span>折扣券</span>
                    <div><span>9.0</span>折</div>
                    <p>满50元可用</p>
                </div>
                <div class="coupon-middle"></div>
                <div class="coupon-right">
                    <p class="coupon-title">1元3小时用车体验券</p>
                    <p class="coupon-expiry">有效期至2017年07月29日</p>
                    <i></i>
                    <div>
                        <p>全国通用</p>
                        <p>只可抵扣时间费用、里程费用</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
 export default {
    data () {
        return {

        }
    }
 }
</script>

<style scoped>
.coupon-list {
    /*width: 100%;*/
    /*height: 100%;*/
    padding: 20px;
    padding-bottom: 10px;
    background: #f5f5f5;
}
.coupon-select {
    width: 100%;
    height: 100px;
    padding: 32px 40px 30px 30px;
    margin-bottom: 20px;
    text-align: left;
    position: relative;

    background: #fff;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.10);
    border-radius: 10px;

    font-family: PingFangSC-Regular;
    font-size: 26px;
    color: #333333;
    letter-spacing: 0;
}
.coupon-select p {
    width: 70%;
}
.coupon-select span {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: #e9e9e9;
    margin: 30px 40px;
}
/*优惠券样式*/
 ul li {
    display: flex;
    height: 240px;
    margin-bottom: 20px;

    background: #fff;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.10);
    border-radius: 10px;

    font-family: PingFangSC-Regular;
    font-size: 20px;
    color: #333333;
    letter-spacing: 0;
 }
 .coupon-left {
    width: 264px;
    position: relative;
    text-align: center;
 }
 .coupon-left>span {
    display: block;
    width: 80px;
    height: 34px;
    line-height: 34px;
    padding-bottom: 5px;
    background: #0db95f;
    border-radius: 6px;

    position: absolute;
    top: 12px;
    left: 18px;

    font-family: PingFangSC-Regular;
    font-size: 24px;
    color: #fff;
    letter-spacing: 0;
 }
 .coupon-left div {
    line-height: 71px;
    margin-top: 94px;
    font-family: .PingFangSC-Regular;
    font-size: 28px;
    color: #F95434;
    letter-spacing: 0;
 }
 .coupon-left div span {
    font-family: AvantiBold;
    font-size: 72px;
 }
 .coupon-middle {
    width: 4px;
    height: 160px;
    margin-top: 40px;
    border: 2px solid #fafafa;
 }
 .coupon-right {
    width: 462px;
    padding: 30px 60px 30px 32px;
    position: relative;
 }
 .coupon-right p {
    line-height: 28px;
 }
 .coupon-title {
    margin-bottom: 18px;

    font-family: .PingFangSC-Regular;
    font-size: 28px;
    color: #f95434;
    letter-spacing: 0;
 }
 .coupon-expiry {
    color: #b4b4b4;
 }
 .coupon-right div {
    position: absolute;
    bottom: 30px;
 }
 .coupon-right i {
    display: block;
    width: 40px;
    height: 40px;
    background-color: #ccc;

    position: absolute;
    top: 30px;
    right: 40px;
 }
 /*分割线*/
 .coupon-line {
    margin: 30px 0;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 24px;
    color: #b4b4b4;
    letter-spacing: 0;
 }
 .coupon-line:before {
    content: "";
    display: inline-block;
    width: 160px;
    /*height: 2px;*/
    vertical-align: middle;
    margin-right: 40px;
    border-top: 2px solid #e6e6e6;
 }
 .coupon-line:after {
    content: "";
    display: inline-block;
    width: 160px;
    /*height: 2px;*/
    vertical-align: middle;
    margin-left: 40px;
    border-top: 2px solid #e6e6e6;
 }
 #coupon-over p {
    color: #b4b4b4;
 }
 #coupon-over span {
    color: #b4b4b4;
 }
 #coupon-over div {
    color: #b4b4b4;
 }
 /*第一个span*/
 #coupon-over li>div>span {
    color: #fff;
    background: #b4b4b4;
 }
</style>
